<template>
    <div class="box">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="岗位状态：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="全部">
                    <el-option label="全部" value="one" />
                    <el-option label="正常" value="two" />
                    <el-option label="停用" value="three" />
                </el-select>
            </el-form-item>
            <el-form-item label="岗位名称：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="搜索岗位名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    查询
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" :icon="Plus" class="add">添加岗位</el-button>

        <el-table :data="tableData" stripe style="width: 100%;height:100%">
            <el-table-column prop="date" label="ID" width="60" />
            <el-table-column prop="name" label="岗位名称" />
            <el-table-column prop="address" label="权限角色" />
            <el-table-column prop="notes" label="备注" />
            <el-table-column prop="money" label="岗位工时单价" />
            <el-table-column label="岗位状态">
                <template #default="scope">
                    <el-button v-if="scope.row.states == 0" type="warning" plain>停用</el-button>
                    <el-button v-else type="primary" plain>正常</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" class="flexF">
                <template #default="scope">
                    <el-link @click="centerDialogVisible = true" type="primary" v-for="(item, index) in scope.row.children"
                        :key="index">
                        <span style="margin:0 5px 0 ;color:#ccc" v-if="index == 0 ? false : true">|</span>
                        {{ item }}
                    </el-link>
                    <!-- 弹框 -->
                    <el-dialog v-model="centerDialogVisible" title="岗位详情" width="30%" align-center>
                        <span>岗位信息</span>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取消</el-button>
                                <el-button class="el-btn" type="primary" @click="centerDialogVisible = false">
                                    确认
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[10, 20, 50, 100, 500]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="500" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" class="size" />
        </div>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const centerDialogVisible = ref(false)

interface RuleForm {
    name: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    type: string[]
    resource: string
    desc: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { message: 'Please input Activity name' },
        { min: 3, max: 5, message: 'Length should be 3 to 5' },
    ],
    region: [
        {
            // required: true,
            message: 'Please select Activity zone',
            // trigger: 'change',
        },
    ],
    count: [
        {
            // required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const tableData = [
    {
        date: '1',
        name: '超级岗位',
        address: '超级员工权限,总经理权限',
        notes: "超级岗位，不可轻易修改权限",
        money: "10000",
        // state: "禁用",
        states: 0,
        children: [
            '详情'
        ]
        // operate: "详情",

    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        // state: "正常",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
        // operate: "编辑 | 修改 | 删除",
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        // state: "正常",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
        // operate: "编辑 | 修改 | 删除",
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
    {
        date: '2',
        name: '人事专员',
        address: '人事专员',
        notes: "普通员工",
        money: "1000",
        states: 1,
        children: [
            '详情', "编辑", '删除'
        ]
    },
]



const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>

<style scoped>
.box {
    width: 1300;
}


.el-form-item {
    margin: 10px 0;
}

.demo-ruleForm,
.flex {
    display: flex;
}

.el-form-item {
    margin: 0 5px;
}

.el-select,
.el-input {
    width: 180px;
    margin-left: -20px;
}

.mb-4 {
    display: flex;
}

.mb {
    width: 50px;
}

.add {
    margin: 30px 0;
}


.col {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #F3F4F6;
    margin-top: 10px;
}

.flexF {
    position: relative;
}

.flex {
    position: absolute;
    right: 0;
    top: 3px;
}

.demo-pagination-block {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}



:deep(.states) {
    width: 60px;
    height: 30px;
    border-radius: 5px;
    background-color: #E8EDFB;
}

</style>